<script setup lang="ts"></script>

<template>
  <TheHeader></TheHeader>
  <div class="banner">
    <div class="left">
      <div class="title">帮助你获得最好的⼯具</div>
      <div class="desc">
        客来易为您提供简历库、⽂档库、项⽬管理、CRM等功能，帮助你获得最好、最有效的工具。
      </div>
      <el-button type="primary" class="try-button">免费试用</el-button>
    </div>
    <img
      src="@/assets/images/index/banner_img.png"
      alt="@/assets/images/index/banner_img.png"
      class="right"
    />
  </div>
  <div class="question">
    <div class="title">您的团队是否存在以下的问题？</div>
    <div class="list">
      <div class="item">
        <img
          src="@/assets/images/index/item_chart.png"
          alt="@/assets/images/index/item_chart.png"
          class="icon"
        />
        <div class="title">工作效率低</div>
        <div class="desc">团队每个人都很忙，但是工作进度慢，效率低</div>
      </div>
      <div class="item">
        <img
          src="@/assets/images/index/item_chat.png"
          alt="@/assets/images/index/item_chat.png"
          class="icon"
        />
        <div class="title">沟通难</div>
        <div class="desc">跨部门职责交接，沟通不顺利，导致影响项目进度</div>
      </div>
      <div class="item">
        <img
          src="@/assets/images/index/item_edit.png"
          alt="@/assets/images/index/item_edit.png"
          class="icon"
        />
        <div class="title">项目进展不可控</div>
        <div class="desc">项目节点不能按时完成，人员调度不顺利</div>
      </div>
    </div>
  </div>
  <div class="superiority">
    <div class="title">客来易 助力团队提高团队协作效率</div>
    <div class="left">
      <div class="item">
        <img src="@/assets/images/index/gou.jpg" alt="@/assets/images/index/gou.jpg" class="icon" />
        <div class="text">
          <div class="title">降低40%沟通难度</div>
          <div class="desc">
            即使同时讨论多个话题也不会混乱，还可以使用快捷表情，减少对他人的干扰，重要通知、信息、文件不被淹没
          </div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/images/index/gou.jpg" alt="@/assets/images/index/gou.jpg" class="icon" />
        <div class="text">
          <div class="title">缩短50%项目时间</div>
          <div class="desc">实时查看项目进度，精确 项目质量</div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/images/index/gou.jpg" alt="@/assets/images/index/gou.jpg" class="icon" />
        <div class="text">
          <div class="title">提升60%协同效率</div>
          <div class="desc">公开透明的线上看板，轻松保持个人与组织目标一致</div>
        </div>
      </div>
    </div>
    <img
      src="@/assets/images/index/superiority.png"
      alt="@/assets/images/index/superiority.png"
      class="right"
    />
  </div>
  <el-carousel class="carousel-container" direction="vertical">
    <el-carousel-item class="carousel-item full" v-for="i in 4" :key="i">
      <div class="full">
        <div class="arousel-item1">
          <img
            src="@/assets/images/index/椭圆形.jpg"
            alt="@/assets/images/index/椭圆形.jpg"
            class="oval"
          />
          <div class="carousel-title">更懂你的简历库</div>
          <p class="partone">智能化招聘，让HR从事务性工作中解放出来！</p>
          <p class="parttwo">智能简历筛选库，多维度去重越用越懂你</p>
          <NuxtLink class="know">了解简历库</NuxtLink>
        </div>

        <img
          src="@/assets/images/index/carousel(1).jpg"
          alt="@/assets/images/index/carousel(1).jpg"
          class="crm"
        />
      </div>
    </el-carousel-item>
  </el-carousel>
  <div class="grow-up">
    <div class="title">与更多优秀企业一起高速成长</div>
    <img
      src="@/assets/images/index/company.jpg"
      alt="@/assets/images/index/company.jpg"
      class="company"
    />
  </div>
  <TheFoot></TheFoot>
</template>

<style scoped lang="scss">
$baseWidth: 1366px;

.know {
  color: #009fe3;
  margin-left: 111px;
}
.company {
  width: 1200px;
  height: 311px;
  margin-left: 85px;
}
.parttwo {
  margin: 35px 0 80px 111px;
  font-weight: 400;
  width: 220px;
  font-size: 16px;
  line-height: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
}
.partone {
  margin: 35px 0 0 111px;
  font-weight: 400;
  width: 320px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
}
.carousel-title {
  margin: 30px 0 0 111px;
  font-size: 32px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 600;
  color: #353535;
  line-height: 44px;
}
.oval {
  width: 64px;
  height: 64px;
  margin: 175px 0 0 111px;
}

.crm {
  width: 711px;
  height: 511px;
  margin: 105px 100px 0 0;
}

.arousel-item1 {
  width: 820px;
  height: 100%;
  background-color: #fff;
}
.full {
  width: 100%;
  height: 100%;
  display: flex;
  //   background-color: red;
}
.banner {
  width: $baseWidth;
  height: 512px;
  background: #ffffff;
  display: flex;
  margin: 0 auto;

  > .left {
    width: 400px;
    margin: 0 48px 0 83px;

    > .title {
      width: 400px;
      height: 56px;
      font-size: 40px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #353535;
      line-height: 56px;
      margin-top: 138px;
    }

    > .desc {
      width: 400px;
      height: 84px;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #353535;
      line-height: 28px;
      margin-top: 24px;
    }

    > .try-button {
      width: 160px;
      height: 48px;
      background: #0071e3;
      border-radius: 24px;
      margin-top: 24px;
    }
  }

  > .right {
    width: 764px;
    height: 416px;
    margin: 50px 71px 0 0;
  }
}

.question {
  width: $baseWidth;
  height: 372px;
  background: #f8fbff;
  overflow: hidden;

  > .title {
    width: 448px;
    height: 44px;
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #353535;
    line-height: 44px;
    margin: 60px auto 0 auto;
  }

  > .list {
    margin: 48px auto 0 auto;
    display: flex;
    width: 1200px;

    > .item {
      width: 370px;
      height: 160px;
      background: #ffffff;
      box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      position: relative;
      margin-right: 45px;

      &:last-of-type {
        margin-right: 0;
      }

      > .icon {
        width: 48px;
        height: 48px;
        position: absolute;
        left: 24px;
        top: 32px;
      }

      > .title {
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #353535;
        line-height: 28px;
        position: absolute;
        left: 96px;
        top: 32px;
      }

      > .desc {
        width: 250px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #353535;
        line-height: 22px;
        position: absolute;
        left: 96px;
        top: 76px;
      }
    }
  }
}

.superiority {
  width: $baseWidth;
  overflow: hidden;
  height: 540px;
  position: relative;

  > .title {
    width: 491px;
    height: 44px;
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #353535;
    line-height: 44px;
    margin: 60px auto 0 auto;
  }

  > .left {
    position: absolute;
    top: 152px;
    left: 83px;

    > .item {
      display: flex;
      margin-bottom: 32px;

      &:last-of-type {
        margin-bottom: 0;
      }

      > .icon {
        width: 43px;
        height: 32px;
      }

      > .text {
        margin-left: 12px;

        > .title {
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #353535;
          line-height: 32px;
        }

        > .desc {
          width: 480px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #353535;
          line-height: 24px;
          margin-top: 24px;
        }
      }
    }
  }

  > .right {
    width: 526px;
    height: 295px;
    position: absolute;
    right: 113px;
    top: 169px;
  }
}

.carousel-container {
  width: $baseWidth;
  height: 698px;

  ::v-deep(.el-carousel__container) {
    height: 100%;
  }

  ::v-deep(.el-carousel__indicators--vertical) {
    left: 0;
    right: unset;
  }

  > .carousel-item {
  }
}

.grow-up {
  width: $baseWidth;
  height: 533px;
  background: #ffffff;
  overflow: hidden;

  > .title {
    width: 520px;
    height: 56px;
    font-size: 40px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #353535;
    line-height: 56px;
    margin: 58px auto 48px auto;
  }

  > .img {
    width: 1199px;
    height: 311px;
    margin: 0 auto;
    display: block;
  }
}
.full {
  width: 100%;
  height: 100%;
}
</style>
